<script setup>
     import other from "@/components/other.vue"
     import { useStore } from 'vuex'
     import {reactive,ref} from 'vue'
     import {  routes } from '@/router'
     const store  = useStore();

     var state = store.state;
     console.log("(store.state::"+store.state);

     const web =reactive({
      name:"lcj",
      url:"www.A.com"
      })

      
    let data = reactive({
        	count: 0,
          cRoutes: [],
        })


    const emitsGetWeb = (data) =>{
      console.log(data)
      web.url=data.url
    }

    const user=ref(0)
    const emitsUserAdd = (data) =>{
      console.log(data)
      user.value +=data
      }

    let add = () => {
        console.log("add")
        //全局参数设置和读取
        //dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('mutations方法名',值)
        //commit：同步操作，写法：this.$store.commit('mutations方法名',值)
        store.commit("add",{count:1})
        data.count=store.getters.getCount
      }

      let generateRoutes = () => {
        console.log("generateRoutes")
        //全局参数设置和读取
        //dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('mutations方法名',值)
        //commit：同步操作，写法：this.$store.commit('mutations方法名',值)
        store.commit("SET_ROUTES",{state,routes})
        data.cRoutes=store.getters.permission_routes
        console.log(data.cRoutes)
      }
      

</script>


<script>

    // let data = reactive({
    //     	count: 0
    //     })

    // let add = () => {
    //     console.log("add")
    //     //store.dispatch('addCount')
    //     data.count = data.count+1 
    //     store.getters.getCount= data.count
    //   }
export default {
  name: "MainPage",
  methods:{
  },
  setup(){
    // 在setup中定义的方法和数据如果需要在页面中使用 则需要先将数据或者方法返回
    return {
      //data,
      //add,
      //web
      
    }
  },
  computed: {
    routes() {
      return store.getters.permission_routes
    }
  },
};
</script>

<template>
      <h1>父组件</h1>
     原先web.url= ww.A.com  <br>
     子传后web.url= {{ web.url }} <br>
     user.value={{ user }} <br>
    <other  @getWeb="emitsGetWeb" @userAdd="emitsUserAdd"/>

    <hr style=" height:2px;border:none;border-top:2px dotted black;" /> 
    <h1>vuex+store</h1>
    <div class="container">
        <button @click="add">{{data.count}}</button>
        <button @click="generateRoutes">{{data.count}}</button>
    </div>
  </template>
   


